<template>
	<view class="v-popup">
		<v-overlay
			:show="show"
			@click="overlayClick"
			v-if="overlay"
			:duration="overlayDuration"
			:customStyle="overlayStyle"
			:opacity="overlayOpacity"
		></v-overlay>
		<v-transition
			:show="show"
			:customStyle="transitionStyle"
			:mode="position"
			:duration="duration"
			@afterEnter="afterEnter"
			@click="clickHandler"
		>
			<view
				class="v-popup__content"
				:style="[contentStyle]"
				@tap.stop="noop"
			>
				<v-status-bar v-if="safeAreaInsetTop"></v-status-bar>
				<slot></slot>
				<view
					v-if="closeable"
					@tap.stop="close"
					class="v-popup__content__close"
					:class="['v-popup__content__close--' + closeIconPos]"
					hover-class="v-popup__content__close--hover"
					hover-stay-time="150"
				>
					<v-icon
						name="close"
						color="#909399"
						size="18"
						bold
					></v-icon>
				</view>
				<v-safe-bottom v-if="safeAreaInsetBottom"></v-safe-bottom>
			</view>
		</v-transition>
	</view>
</template>

<script>
import props from "./props.js";
import mpMixin from "../../libs/mixin/mpMixin.js";
import mixin from "../../libs/mixin/mixin.js";

/**
 * popup 弹窗
 * @description 弹出层容器，用于展示弹窗、信息提示等内容，支持上、下、左、右和中部弹出。组件只提供容器，内部内容由用户自定义
 * @property {Boolean}			show				是否展示弹窗 (默认 false )
 * @property {Boolean}			overlay				是否显示遮罩 （默认 true ）
 * @property {String}			mode				弹出方向（默认 'bottom' ）
 * @property {String | Number}	duration			动画时长，单位ms （默认 300 ）
 * @property {String | Number}	overlayDuration			遮罩层动画时长，单位ms （默认 350 ）
 * @property {Boolean}			closeable			是否显示关闭图标（默认 false ）
 * @property {Object | String}	overlayStyle		自定义遮罩的样式
 * @property {String | Number}	overlayOpacity		遮罩透明度，0-1之间（默认 0.5）
 * @property {Boolean}			closeOnClickOverlay	点击遮罩是否关闭弹窗 （默认  true ）
 * @property {String | Number}	zIndex				层级 （默认 10075 ）
 * @property {Boolean}			safeAreaInsetBottom	是否为iPhoneX留出底部安全距离 （默认 true ）
 * @property {Boolean}			safeAreaInsetTop	是否留出顶部安全距离（状态栏高度） （默认 false ）
 * @property {String}			closeIconPos		自定义关闭图标位置（默认 'top-right' ）
 * @property {String | Number}	round				圆角值（默认 0）
 * @property {Boolean}			zoom				当mode=center时 是否开启缩放（默认 true ）
 * @property {Object}			customStyle			组件的样式，对象形式
 * @event {Function} open 弹出层打开
 * @event {Function} close 弹出层收起
 * @example <v-popup v-model="show"><text>出淤泥而不染，濯清涟而不妖</text></v-popup>
 */
export default {
	name: "v-popup",
	mixins: [mpMixin, mixin, props],
	data() {
		return {
			overlayDuration: this.duration + 50,
		};
	},
	watch: {
		show(newValue, oldValue) {
			if (newValue === true) {
				// #ifdef MP-WEIXIN
				const children = this.$children;
				this.retryComputedComponentRect(children);
				// #endif
			}
		},
	},
	computed: {
		transitionStyle() {
			const style = {
				zIndex: this.zIndex,
				position: "fixed",
				display: "flex",
			};
			style[this.mode] = 0;
			if (this.mode === "left") {
				return uni.$u.deepMerge(style, {
					bottom: 0,
					top: 0,
				});
			} else if (this.mode === "right") {
				return uni.$u.deepMerge(style, {
					bottom: 0,
					top: 0,
				});
			} else if (this.mode === "top") {
				return uni.$u.deepMerge(style, {
					left: 0,
					right: 0,
				});
			} else if (this.mode === "bottom") {
				return uni.$u.deepMerge(style, {
					left: 0,
					right: 0,
				});
			} else if (this.mode === "center") {
				return uni.$u.deepMerge(style, {
					alignItems: "center",
					"justify-content": "center",
					top: 0,
					left: 0,
					right: 0,
					bottom: 0,
				});
			}
		},
		contentStyle() {
			const style = {};
			// 通过设备信息的safeAreaInsets值来判断是否需要预留顶部状态栏和底部安全局的位置
			// 不使用css方案，是因为nvue不支持css的iPhoneX安全区查询属性
			const { safeAreaInsets } = uni.$u.sys();
			if (this.mode !== "center") {
				style.flex = 1;
			}
			// 背景色，一般用于设置为transparent，去除默认的白色背景
			if (this.bgColor) {
				style.backgroundColor = this.bgColor;
			}
			if (this.round) {
				const value = uni.$u.addUnit(this.round);
				if (this.mode === "top") {
					style.borderBottomLeftRadius = value;
					style.borderBottomRightRadius = value;
				} else if (this.mode === "bottom") {
					style.borderTopLeftRadius = value;
					style.borderTopRightRadius = value;
				} else if (this.mode === "center") {
					style.borderRadius = value;
				}
			}
			return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle));
		},
		position() {
			if (this.mode === "center") {
				return this.zoom ? "fade-zoom" : "fade";
			}
			if (this.mode === "left") {
				return "slide-left";
			}
			if (this.mode === "right") {
				return "slide-right";
			}
			if (this.mode === "bottom") {
				return "slide-up";
			}
			if (this.mode === "top") {
				return "slide-down";
			}
		},
	},
	emits: ["open", "close", "click"],
	methods: {
		// 点击遮罩
		overlayClick() {
			if (this.closeOnClickOverlay) {
				this.$emit("close");
			}
		},
		close(e) {
			this.$emit("close");
		},
		afterEnter() {
			this.$emit("open");
		},
		clickHandler() {
			// 由于中部弹出时，其v-transition占据了整个页面相当于遮罩，此时需要发出遮罩点击事件，是否无法通过点击遮罩关闭弹窗
			if (this.mode === "center") {
				this.overlayClick();
			}
			this.$emit("click");
		},
		// #ifdef MP-WEIXIN
		retryComputedComponentRect(children) {
			// 组件内部需要计算节点的组件
			const names = [
				"v-calendar-month",
				"v-album",
				"v-collapse-item",
				"v-dropdown",
				"v-index-item",
				"v-index-list",
				"v-line-progress",
				"v-list-item",
				"v-rate",
				"v-read-more",
				"v-row",
				"v-row-notice",
				"v-scroll-list",
				"v-skeleton",
				"v-slider",
				"v-steps-item",
				"v-sticky",
				"v-subsection",
				"v-swipe-action-item",
				"v-tabbar",
				"v-tabs",
				"v-tooltip",
			];
			// 历遍所有的子组件节点
			for (let i = 0; i < children.length; i++) {
				const child = children[i];
				// 拿到子组件的子组件
				const grandChild = child.$children;
				// 判断如果在需要重新初始化的组件数组中名中，并且存在init方法的话，则执行
				if (
					names.includes(child.$options.name) &&
					typeof child?.init === "function"
				) {
					// 需要进行一定的延时，因为初始化页面需要时间
					uni.$u.sleep(50).then(() => {
						child.init();
					});
				}
				// 如果子组件还有孙组件，进行递归历遍
				if (grandChild.length) {
					this.retryComputedComponentRect(grandChild);
				}
			}
		},
		// #endif
	},
};
</script>

<style lang="scss" scoped>
@import "../../libs/css/components.scss";
$v-popup-flex: 1 !default;
$v-popup-content-background-color: #fff !default;

.v-popup {
	flex: $v-popup-flex;

	&__content {
		background-color: $v-popup-content-background-color;
		position: relative;

		&--round-top {
			border-top-left-radius: 0;
			border-top-right-radius: 0;
			border-bottom-left-radius: 10px;
			border-bottom-right-radius: 10px;
		}

		&--round-left {
			border-top-left-radius: 0;
			border-top-right-radius: 10px;
			border-bottom-left-radius: 0;
			border-bottom-right-radius: 10px;
		}

		&--round-right {
			border-top-left-radius: 10px;
			border-top-right-radius: 0;
			border-bottom-left-radius: 10px;
			border-bottom-right-radius: 0;
		}

		&--round-bottom {
			border-top-left-radius: 10px;
			border-top-right-radius: 10px;
			border-bottom-left-radius: 0;
			border-bottom-right-radius: 0;
		}

		&--round-center {
			border-top-left-radius: 10px;
			border-top-right-radius: 10px;
			border-bottom-left-radius: 10px;
			border-bottom-right-radius: 10px;
		}

		&__close {
			position: absolute;

			&--hover {
				opacity: 0.4;
			}
		}

		&__close--top-left {
			top: 15px;
			left: 15px;
		}

		&__close--top-right {
			top: 15px;
			right: 15px;
		}

		&__close--bottom-left {
			bottom: 15px;
			left: 15px;
		}

		&__close--bottom-right {
			right: 15px;
			bottom: 15px;
		}
	}
}
</style>
